@bezier_transition:all 550ms cubic-bezier(0.23, 1, 0.32, 1) 0ms;
@break1: 40px;
@break2: 200px;
@break3: 240px;

#userdashboard_main_tab, #userdashboard_myparams_title{
  opacity: 1 !important;
  transition: @bezier_transition;
  font-family: Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

#userdashboard_main_tab{

  &.horizontal_tabulator {
    display: block;
    position: relative;

    div.tabulatorContainer{
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: @break3;
      padding-top: 10px;
      background-color: #444;
      z-index: 1;
      box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
      transition: @bezier_transition;
      span.toggleHeader{

        padding: 16px;
        font-size: 13px;
        color: #ff7043 !important;
        background-color: transparent !important;
        &.toggleInactive{
          color: white !important;
        }
        span[class^="icon-"], span[class*=" icon-"], span.mdi{
          display: inline;
          float: right;
          font-size: 18px;
          margin-right: 0;
        }
      }
    }

    div.tabulatorPanelsContainer{
      transition: @bezier_transition;

      position: absolute;
      left: @break3;
      top: 0;
      bottom: 0;
      right:0;
      padding:16px;
      background-color: #f4f4f4;
      > div{
        position: relative;
        background-color: #ffffff;
        border-radius: 2px;
        box-shadow:0 3px 6px rgba(0,0,0,.16),0 3px 6px rgba(0,0,0,.23);
        &#account_pane, &#webdav_pane{
          overflow-y: auto;
        }
        .title-flex{
          display: flex;
          h3{
            flex: 1;
            .legend{
              font-size: 12px;
              font-weight: 300;
              line-height: 1.3em;
              margin-top: 3px;
            }
            &.dashboard_panel_title{
              margin-top: 16px;
              padding-left: 20px;
              font-size: 24px;
              line-height: 32px;
              font-weight: 400;
              color: rgba(0, 0, 0, 0.87);
            }
          }
          div.actionBar, div.action_bar{
            margin: 20px 20px 0 0;
          }
        }
        .action_bar, #buttons_bar{
          background-color: white !important;
          padding-bottom: 20px;
          border-bottom: 0;
          a{
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.24), 0 1px 6px rgba(0, 0, 0, 0.12);
            margin: 0 3px;
            display: inline-block;
            border-radius: 2px !important;
            padding: 7px 16px;
            height: auto;
            span.actionbar_button_label{
              font-size: 14px;
            }
            @media only screen and (max-width: 720px){
              span.ajxp_icon_span {
                display: block !important;
                margin: 0 0 10px;
              }
            }
          }
        }
        div.class-FetchedResultPane{
          border-top: 1px solid rgb(250,250,250);
          &#shared_files_list{
            border-top:1px solid #eaeaea;
          }
          background-color: #ffffff;
          div.thumbnail_selectable_cell.detailed{
            padding: 10px 5px;
            border-bottom: 1px solid rgba(0,0,0,0.03);
            transition: @bezier_transition;
            div.mimefont{
              line-height: 28px;
            }
            div.thumbLabel{
              padding-top: 7px;
              font-size: 14px;
            }
            div.thumbnail_selectable_cell{
              padding-right: 11px;
            }
          }
          div.thumbnail_selectable_cell.selected-focus{
            background-color: lighten(#ff5722, 5) !important;
          }

          div.header_resizer div.header_label {
            padding-left: 10px;
            padding-top: 7px;
          }
          .sort-table tr{
            background-color: white !important;
            td{
              border-bottom: 1px solid rgb(234,234,234);
              padding: 10px 0;
              &:first-of-type{
                padding: 10px 5px;
                span.mimefont{
                  margin-right: 10px;
                }
              }
            }
            &.selected-focus{
              background-color: lighten(#ff5722, 5) !important;
              td{
                border-bottom: 0;
              }
            }
            &[data-groupByValue]{
              &.selected-focus{
                background-color: white !important;
                td{
                  border-bottom: 1px solid rgb(234,234,234);
                }
              }
              h3 {
                padding: 5px 5px 10px;
                font-size: 1em;
                color: #00897B;
                border-bottom: 0;
              }
            }
          }
        }
      }
      div#webdav_pane{
        div.dav-url{
          display: flex;
          div.mui-text-field{
            flex: 1;
            width: auto;
          }
          button.mui-icon-button{
            margin-top: 30px;
            span.mui-font-icon{
              font-size: 16px;
              color: rgba(0,0,0,0.33);
              &:hover{
                color: rgba(0,0,0,0.73);
              }
            }
          }
        }
        div.copy_legend{
          color: #00897B;
          margin-top: -10px;
        }
        div.dav-password-legend{
          color: rgba(0,0,0,0.33);
        }
      }
    }

    @media only screen
    and (max-width : 800px){
      div.tabulatorContainer{
        width: @break2;
      }
      div.tabulatorPanelsContainer{
        left: @break2;
      }
    }
    @media only screen
    and (max-width : 630px){
      div.tabulatorContainer{
        width: @break1;
        span.toggleHeader{
          padding-right: 11px !important;
        }
        span.tab_label{
          display: none;
        }
      }
      div.tabulatorPanelsContainer{
        left: @break1;
        .title-flex{
          display: block !important;
          h3{
            padding-right: 20px;
          }
          .actionBar, .action_bar{
            text-align: right !important;
          }
        }
      }
    }
  }

}


div#userdashboard_myparams_title{

  position: absolute;
  width: @break3;
  box-sizing: border-box;
  bottom: 0;
  z-index: 2;
  white-space: nowrap;
  overflow: hidden;

  span#dash_title{
      display: none;
  }

  a#dash_back_workspace{
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    display: block;
    cursor: pointer;
    padding: 25px;
    &:hover{
      color: #ffffff;
    }
  }

  @media only screen
  and (max-width : 800px){
    &{
      width: @break2 !important;
    }
  }
  @media only screen
  and (max-width : 630px){
    &{
      width: @break1 !important;
    }
    a#dash_back_workspace{
      display: block;
      span.icon-chevron-left{
        display: inline-block;
        margin-right: 20px;
      }
    }
  }

}

div#team_edit_form{

  span.user_entry_label{
    color: rgba(0,0,0,0.87);
    &::before {
      content: "\f007";
      font-family: FontAwesome;
      display: inline-block;
      margin-right: 5px;
    }
  }

  div#team_edit_container {
    max-height: 200px;
    overflow: auto;
    background-color: white;
    border: 1px solid #ccc;
    border-radius: 2px;
    z-index: 10;
    ul {
      margin: 0;
      padding-left: 0;
      li{
        list-style: none;
        padding: 8px;
        color: rgba(0,0,0,0.87);
        &.selected{
          background-color: #eee !important;
        }
      }
    }

  }



  #team_edit_entries {

    .user_entry{
        padding: 8px;
        border-bottom: 1px solid rgba(0,0,0,0.03);
      .delete_user_entry{
          float: right;
          cursor: pointer;
      }
    }

  }


}

@media only screen
and (max-width : 630px){

}

@media only screen
and (max-width : 400px){

    #logo_div img{
        width: 100px;
    }

}
